<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的个人空间</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#1677ff', // 主色调：QQ蓝
            secondary: '#ff7d00', // 辅助色：橙色
            accent: '#ff4d4f', // 强调色：红色
            neutral: {
              100: '#f5f5f5',
              200: '#e5e5e5',
              300: '#d4d4d4',
              400: '#a3a3a3',
              500: '#737373',
              600: '#525252',
              700: '#404040',
              800: '#262626',
              900: '#171717',
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 2px 8px rgba(0, 0, 0, 0.1)',
            'hover': '0 4px 16px rgba(0, 0, 0, 0.15)',
          }
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .bg-gradient-overlay {
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
      }
    }
  </style>
</head>

<body class="bg-neutral-100 text-neutral-800 min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo和名称 -->
      <div class="flex items-center space-x-3">
        <div class="text-primary text-2xl">
          <i class="fa fa-qq"></i>
        </div>
        <h1 class="text-xl font-bold text-primary hidden sm:block">我的个人空间</h1>
      </div>
      
      <!-- 搜索框 -->
      <div class="hidden md:flex items-center bg-neutral-100 rounded-full px-4 py-2 flex-1 max-w-md mx-8">
        <i class="fa fa-search text-neutral-400 mr-2"></i>
        <input type="text" placeholder="搜索日志、照片..." class="bg-transparent w-full outline-none text-sm">
      </div>
      
      <!-- 导航菜单 -->
      <nav class="flex items-center space-x-1 sm:space-x-4">
        <a href="#" class="p-2 text-neutral-600 hover:text-primary transition-colors relative">
          <i class="fa fa-home text-lg"></i>
          <span class="hidden sm:inline-block ml-1">首页</span>
        </a>
        <a href="#" class="p-2 text-neutral-600 hover:text-primary transition-colors relative">
          <i class="fa fa-bell text-lg"></i>
          <span class="hidden sm:inline-block ml-1">通知</span>
          <span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
        </a>
        <a href="#" class="p-2 text-neutral-600 hover:text-primary transition-colors">
          <i class="fa fa-envelope text-lg"></i>
          <span class="hidden sm:inline-block ml-1">消息</span>
        </a>
        <div class="relative group">
          <button class="flex items-center space-x-1 focus:outline-none">
            <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
            <span class="hidden sm:inline-block font-medium">尚军凯</span>
            <i class="fa fa-angle-down text-neutral-400 group-hover:rotate-180 transition-transform"></i>
          </button>
          <!-- 下拉菜单 -->
          <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform group-hover:translate-y-0 translate-y-2">
            <a href="#" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">
              <i class="fa fa-user mr-2 text-primary"></i>个人资料
            </a>
            <a href="#" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">
              <i class="fa fa-cog mr-2 text-primary"></i>设置
            </a>
            <div class="border-t border-neutral-200 my-1"></div>
            <a href="#" class="block px-4 py-2 text-sm text-accent hover:bg-neutral-100">
              <i class="fa fa-sign-out mr-2"></i>退出登录
            </a>
          </div>
        </div>
      </nav>
    </div>
  </header>

  <!-- 主要内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
    <!-- 左侧边栏 - 个人资料 -->
    <aside class="lg:col-span-3 space-y-6">
      <!-- 个人资料卡片 -->
      <div class="bg-white rounded-xl shadow-card overflow-hidden transition-shadow hover:shadow-hover">
        <!-- 封面图 -->
        <div class="h-32 bg-gradient-to-r from-primary to-blue-400 relative">
          <button class="absolute bottom-2 right-2 bg-white/80 hover:bg-white text-primary rounded-full p-2 transition-colors">
            <i class="fa fa-camera"></i>
          </button>
        </div>
        
        <!-- 头像和基本信息 -->
        <div class="px-5 pb-5">
          <div class="flex justify-center -mt-12">
            <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-sm">
          </div>
          
          <div class="text-center mt-3">
            <h2 class="text-xl font-bold">阳光男孩</h2>
            <p class="text-neutral-500 text-sm mt-1">今天也是元气满满的一天！</p>
            
            <div class="flex justify-center space-x-4 mt-4">
              <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full text-sm transition-colors">
                <i class="fa fa-plus mr-1"></i>关注
              </button>
              <button class="bg-white border border-primary text-primary hover:bg-primary/5 px-4 py-2 rounded-full text-sm transition-colors">
                <i class="fa fa-envelope-o mr-1"></i>私信
              </button>
            </div>
          </div>
          
          <!-- 数据统计 -->
          <div class="grid grid-cols-3 gap-2 mt-6 text-center">
            <div>
              <p class="text-xl font-bold text-primary">248</p>
              <p class="text-xs text-neutral-500">日志</p>
            </div>
            <div>
              <p class="text-xl font-bold text-primary">1.2k</p>
              <p class="text-xs text-neutral-500">照片</p>
            </div>
            <div>
              <p class="text-xl font-bold text-primary">36</p>
              <p class="text-xs text-neutral-500">视频</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 个人信息 -->
      <div class="bg-white rounded-xl shadow-card p-5 transition-shadow hover:shadow-hover">
        <h3 class="font-bold text-lg mb-4 flex items-center">
          <i class="fa fa-user-circle text-primary mr-2"></i>个人信息
        </h3>
        
        <ul class="space-y-3 text-sm">
          <li class="flex items-start">
            <span class="text-neutral-500 w-16">性别</span>
            <span>男</span>
          </li>
          <li class="flex items-start">
            <span class="text-neutral-500 w-16">生日</span>
            <span>1998年6月18日</span>
          </li>
          <li class="flex items-start">
            <span class="text-neutral-500 w-16">所在地</span>
            <span>上海市</span>
          </li>
          <li class="flex items-start">
            <span class="text-neutral-500 w-16">故乡</span>
            <span>北京市</span>
          </li>
          <li class="flex items-start">
            <span class="text-neutral-500 w-16">感情状况</span>
            <span>单身</span>
          </li>
          <li class="flex items-start">
            <span class="text-neutral-500 w-16">爱好</span>
            <span>摄影、旅行、音乐、美食</span>
          </li>
        </ul>
        
        <button class="w-full mt-4 text-primary hover:text-primary/80 text-sm transition-colors">
          编辑个人资料 <i class="fa fa-angle-right ml-1"></i>
        </button>
      </div>
      
      <!-- 好友列表 -->
      <div class="bg-white rounded-xl shadow-card p-5 transition-shadow hover:shadow-hover">
        <div class="flex justify-between items-center mb-4">
          <h3 class="font-bold text-lg flex items-center">
            <i class="fa fa-users text-primary mr-2"></i>好友列表
          </h3>
          <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
        </div>
        
        <div class="space-y-3">
          <!-- 好友项 -->
          <div class="flex items-center justify-between group">
            <div class="flex items-center space-x-3">
              <div class="relative">
                <img src="https://picsum.photos/id/237/200" alt="好友头像" class="w-10 h-10 rounded-full object-cover">
                <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
              </div>
              <div>
                <p class="font-medium text-sm">星辰大海</p>
                <p class="text-neutral-500 text-xs">在线</p>
              </div>
            </div>
            <button class="opacity-0 group-hover:opacity-100 transition-opacity text-neutral-400 hover:text-primary">
              <i class="fa fa-comment-o"></i>
            </button>
          </div>
          
          <div class="flex items-center justify-between group">
            <div class="flex items-center space-x-3">
              <div class="relative">
                <img src="https://picsum.photos/id/1027/200" alt="好友头像" class="w-10 h-10 rounded-full object-cover">
                <span class="absolute bottom-0 right-0 w-3 h-3 bg-neutral-300 rounded-full border-2 border-white"></span>
              </div>
              <div>
                <p class="font-medium text-sm">风一样的女子</p>
                <p class="text-neutral-500 text-xs">3天前在线</p>
              </div>
            </div>
            <button class="opacity-0 group-hover:opacity-100 transition-opacity text-neutral-400 hover:text-primary">
              <i class="fa fa-comment-o"></i>
            </button>
          </div>
          
          <div class="flex items-center justify-between group">
            <div class="flex items-center space-x-3">
              <div class="relative">
                <img src="https://picsum.photos/id/1012/200" alt="好友头像" class="w-10 h-10 rounded-full object-cover">
                <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
              </div>
              <div>
                <p class="font-medium text-sm">编程达人</p>
                <p class="text-neutral-500 text-xs">在线</p>
              </div>
            </div>
            <button class="opacity-0 group-hover:opacity-100 transition-opacity text-neutral-400 hover:text-primary">
              <i class="fa fa-comment-o"></i>
            </button>
          </div>
        </div>
      </div>
    </aside>
    
    <!-- 中间内容区 -->
    <div class="lg:col-span-6 space-y-6">
      <!-- 发布框 -->
      <div class="bg-white rounded-xl shadow-card p-5 transition-shadow hover:shadow-hover">
        <div class="flex space-x-3">
          <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div class="flex-1">
            <input type="text" placeholder="分享你的新鲜事..." class="w-full bg-neutral-100 rounded-full px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
          </div>
        </div>
        
        <div class="flex justify-between mt-4 pt-4 border-t border-neutral-200">
          <button class="flex items-center space-x-1 px-3 py-1.5 rounded-lg hover:bg-neutral-100 transition-colors text-neutral-600">
            <i class="fa fa-file-text-o text-primary"></i>
            <span class="text-sm">日志</span>
          </button>
          <button class="flex items-center space-x-1 px-3 py-1.5 rounded-lg hover:bg-neutral-100 transition-colors text-neutral-600">
            <i class="fa fa-picture-o text-green-500"></i>
            <span class="text-sm">图片</span>
          </button>
          <button class="flex items-center space-x-1 px-3 py-1.5 rounded-lg hover:bg-neutral-100 transition-colors text-neutral-600">
            <i class="fa fa-film text-purple-500"></i>
            <span class="text-sm">视频</span>
          </button>
          <button class="flex items-center space-x-1 px-3 py-1.5 rounded-lg hover:bg-neutral-100 transition-colors text-neutral-600">
            <i class="fa fa-smile-o text-yellow-500"></i>
            <span class="text-sm">心情</span>
          </button>
        </div>
      </div>
      
      <!-- 内容标签页 -->
      <div class="bg-white rounded-xl shadow-card overflow-hidden transition-shadow hover:shadow-hover">
        <div class="flex border-b border-neutral-200">
          <button class="flex-1 py-4 text-center font-medium text-primary border-b-2 border-primary">
            全部动态
          </button>
          <button class="flex-1 py-4 text-center font-medium text-neutral-500 hover:text-primary transition-colors">
            日志
          </button>
          <button class="flex-1 py-4 text-center font-medium text-neutral-500 hover:text-primary transition-colors">
            图片
          </button>
          <button class="flex-1 py-4 text-center font-medium text-neutral-500 hover:text-primary transition-colors">
            视频
          </button>
        </div>
      </div>
      
      <!-- 日志内容 -->
      <div class="bg-white rounded-xl shadow-card overflow-hidden transition-shadow hover:shadow-hover">
        <div class="p-5">
          <div class="flex items-start space-x-3">
            <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
            <div>
              <div class="flex items-center">
                <h3 class="font-medium">阳光男孩</h3>
                <span class="mx-2 text-neutral-300">•</span>
                <p class="text-neutral-500 text-sm">昨天 15:30</p>
              </div>
              <h4 class="font-bold mt-2 text-lg">周末的海边旅行</h4>
              <p class="text-neutral-700 mt-2 leading-relaxed">
                周末和朋友们一起去了海边，天气非常好，海水湛蓝，天空万里无云。我们在沙滩上玩了一整天，晚上还看了美丽的日落。这是最近最开心的一次旅行，分享给大家一些照片和视频~
              </p>
            </div>
          </div>
          
          <!-- 日志图片 -->
          <div class="mt-4 grid grid-cols-2 gap-2">
            <img src="https://picsum.photos/id/1015/800/600" alt="旅行照片" class="rounded-lg w-full h-48 object-cover hover:opacity-90 transition-opacity cursor-pointer">
            <img src="https://picsum.photos/id/1016/800/600" alt="旅行照片" class="rounded-lg w-full h-48 object-cover hover:opacity-90 transition-opacity cursor-pointer">
          </div>
          
          <!-- 互动区 -->
          <div class="mt-4 pt-4 border-t border-neutral-200 flex justify-between">
            <button class="flex items-center space-x-1 text-neutral-500 hover:text-primary transition-colors px-2 py-1">
              <i class="fa fa-thumbs-o-up"></i>
              <span class="text-sm">32</span>
            </button>
            <button class="flex items-center space-x-1 text-neutral-500 hover:text-primary transition-colors px-2 py-1">
              <i class="fa fa-comment-o"></i>
              <span class="text-sm">8</span>
            </button>
            <button class="flex items-center space-x-1 text-neutral-500 hover:text-primary transition-colors px-2 py-1">
              <i class="fa fa-share-alt"></i>
              <span class="text-sm">分享</span>
            </button>
          </div>
          
          <!-- 评论区 -->
          <div class="mt-4 space-y-3">
            <div class="bg-neutral-50 p-3 rounded-lg">
              <div class="flex items-start space-x-2">
                <img src="https://picsum.photos/id/237/200" alt="评论者头像" class="w-8 h-8 rounded-full object-cover">
                <div class="flex-1">
                  <div class="flex items-center">
                    <h4 class="font-medium text-sm">星辰大海</h4>
                    <span class="ml-2 text-neutral-500 text-xs">昨天 16:05</span>
                  </div>
                  <p class="text-sm mt-1">看起来好棒啊！这是哪里的海边？</p>
                  <div class="flex items-center mt-2 space-x-4">
                    <button class="text-xs text-neutral-500 hover:text-primary transition-colors">
                      <i class="fa fa-thumbs-o-up mr-1"></i>赞
                    </button>
                    <button class="text-xs text-neutral-500 hover:text-primary transition-colors">
                      <i class="fa fa-reply mr-1"></i>回复
                    </button>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 回复框 -->
            <div class="flex items-center space-x-2">
              <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
              <input type="text" placeholder="发表评论..." class="flex-1 bg-neutral-100 rounded-full px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
              <button class="text-primary hover:text-primary/80 transition-colors">
                <i class="fa fa-paper-plane-o"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 图片内容 -->
      <div class="bg-white rounded-xl shadow-card overflow-hidden transition-shadow hover:shadow-hover">
        <div class="p-5">
          <div class="flex items-start space-x-3">
            <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
            <div>
              <div class="flex items-center">
                <h3 class="font-medium">阳光男孩</h3>
                <span class="mx-2 text-neutral-300">•</span>
                <p class="text-neutral-500 text-sm">3天前</p>
              </div>
              <p class="text-neutral-700 mt-2">分享一组城市风光摄影，记录城市的美好瞬间~</p>
            </div>
          </div>
          
          <!-- 图片集 -->
          <div class="mt-4 grid grid-cols-3 gap-1">
            <img src="https://picsum.photos/id/1031/600/600" alt="城市风光" class="rounded-lg w-full h-32 object-cover hover:opacity-90 transition-opacity cursor-pointer">
            <img src="https://picsum.photos/id/1033/600/600" alt="城市风光" class="rounded-lg w-full h-32 object-cover hover:opacity-90 transition-opacity cursor-pointer">
            <img src="https://picsum.photos/id/1036/600/600" alt="城市风光" class="rounded-lg w-full h-32 object-cover hover:opacity-90 transition-opacity cursor-pointer">
            <img src="https://picsum.photos/id/1039/600/600" alt="城市风光" class="rounded-lg w-full h-32 object-cover hover:opacity-90 transition-opacity cursor-pointer">
            <img src="https://picsum.photos/id/1041/600/600" alt="城市风光" class="rounded-lg w-full h-32 object-cover hover:opacity-90 transition-opacity cursor-pointer">
            <div class="relative rounded-lg w-full h-32 bg-neutral-200 flex items-center justify-center">
              <span class="text-neutral-600 font-medium text-sm">+9</span>
            </div>
          </div>
          
          <!-- 互动区 -->
          <div class="mt-4 pt-4 border-t border-neutral-200 flex justify-between">
            <button class="flex items-center space-x-1 text-neutral-500 hover:text-primary transition-colors px-2 py-1">
              <i class="fa fa-thumbs-o-up"></i>
              <span class="text-sm">56</span>
            </button>
            <button class="flex items-center space-x-1 text-neutral-500 hover:text-primary transition-colors px-2 py-1">
              <i class="fa fa-comment-o"></i>
              <span class="text-sm">12</span>
            </button>
            <button class="flex items-center space-x-1 text-neutral-500 hover:text-primary transition-colors px-2 py-1">
              <i class="fa fa-share-alt"></i>
              <span class="text-sm">分享</span>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 视频内容 -->
      <div class="bg-white rounded-xl shadow-card overflow-hidden transition-shadow hover:shadow-hover">
        <div class="p-5">
          <div class="flex items-start space-x-3">
            <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
            <div>
              <div class="flex items-center">
                <h3 class="font-medium">阳光男孩</h3>
                <span class="mx-2 text-neutral-300">•</span>
                <p class="text-neutral-500 text-sm">1周前</p>
              </div>
              <p class="text-neutral-700 mt-2">周末参加音乐节的片段，气氛太嗨了！</p>
            </div>
          </div>
          
          <!-- 视频播放区 -->
          <div class="mt-4 relative rounded-lg overflow-hidden bg-neutral-900">
            <img src="https://picsum.photos/id/1059/1200/600" alt="视频封面" class="w-full h-64 object-cover opacity-90">
            <div class="absolute inset-0 flex items-center justify-center">
              <button class="w-16 h-16 bg-white/20 backdrop-blur-sm hover:bg-white/30 rounded-full flex items-center justify-center transition-colors group">
                <div class="w-0 h-0 border-l-8 border-l-white border-t-4 border-b-4 border-transparent ml-1 group-hover:ml-2 transition-all"></div>
              </button>
            </div>
            <div class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-1.5 py-0.5 rounded">
              03:45
            </div>
          </div>
          
          <!-- 互动区 -->
          <div class="mt-4 pt-4 border-t border-neutral-200 flex justify-between">
            <button class="flex items-center space-x-1 text-neutral-500 hover:text-primary transition-colors px-2 py-1">
              <i class="fa fa-thumbs-o-up"></i>
              <span class="text-sm">89</span>
            </button>
            <button class="flex items-center space-x-1 text-neutral-500 hover:text-primary transition-colors px-2 py-1">
              <i class="fa fa-comment-o"></i>
              <span class="text-sm">24</span>
            </button>
            <button class="flex items-center space-x-1 text-neutral-500 hover:text-primary transition-colors px-2 py-1">
              <i class="fa fa-share-alt"></i>
              <span class="text-sm">分享</span>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 加载更多 -->
      <div class="text-center py-4">
        <button class="bg-white border border-neutral-300 hover:border-primary text-neutral-700 hover:text-primary px-6 py-2 rounded-full text-sm transition-colors shadow-sm">
          加载更多 <i class="fa fa-angle-down ml-1"></i>
        </button>
      </div>
    </div>
    
    <!-- 右侧边栏 -->
    <aside class="lg:col-span-3 space-y-6">
      <!-- 动态通知 -->
      <div class="bg-white rounded-xl shadow-card p-5 transition-shadow hover:shadow-hover">
        <div class="flex justify-between items-center mb-4">
          <h3 class="font-bold text-lg flex items-center">
            <i class="fa fa-bell text-primary mr-2"></i>动态通知
          </h3>
          <a href="#" class="text-primary text-sm hover:underline">全部标为已读</a>
        </div>
        
        <div class="space-y-4 max-h-96 overflow-y-auto scrollbar-hide">
          <!-- 通知项 -->
          <div class="flex items-start space-x-3 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1027/200" alt="通知者头像" class="w-10 h-10 rounded-full object-cover">
            </div>
            <div class="flex-1">
              <p class="text-sm">
                <span class="font-medium">风一样的女子</span> 评论了你的日志
              </p>
              <p class="text-xs text-neutral-500 mt-1">10分钟前</p>
            </div>
            <span class="w-2 h-2 bg-accent rounded-full mt-2"></span>
          </div>
          
          <div class="flex items-start space-x-3 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1012/200" alt="通知者头像" class="w-10 h-10 rounded-full object-cover">
            </div>
            <div class="flex-1">
              <p class="text-sm">
                <span class="font-medium">编程达人</span> 赞了你的照片
              </p>
              <p class="text-xs text-neutral-500 mt-1">1小时前</p>
            </div>
            <span class="w-2 h-2 bg-accent rounded-full mt-2"></span>
          </div>
          
          <div class="flex items-start space-x-3 group">
            <div class="relative">
              <img src="https://picsum.photos/id/237/200" alt="通知者头像" class="w-10 h-10 rounded-full object-cover">
            </div>
            <div class="flex-1">
              <p class="text-sm">
                <span class="font-medium">星辰大海</span> 分享了新视频
              </p>
              <p class="text-xs text-neutral-500 mt-1">昨天</p>
            </div>
          </div>
          
          <div class="flex items-start space-x-3 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1062/200" alt="通知者头像" class="w-10 h-10 rounded-full object-cover">
            </div>
            <div class="flex-1">
              <p class="text-sm">
                <span class="font-medium">小小摄影师</span> 成为了你的好友
              </p>
              <p class="text-xs text-neutral-500 mt-1">3天前</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 热门日志 -->
      <div class="bg-white rounded-xl shadow-card p-5 transition-shadow hover:shadow-hover">
        <div class="flex justify-between items-center mb-4">
          <h3 class="font-bold text-lg flex items-center">
            <i class="fa fa-fire text-secondary mr-2"></i>热门日志
          </h3>
          <a href="#" class="text-primary text-sm hover:underline">更多</a>
        </div>
        
        <div class="space-y-4">
          <!-- 热门日志项 -->
          <div class="flex items-start space-x-3 group cursor-pointer">
            <img src="https://picsum.photos/id/1058/300/200" alt="日志封面" class="w-20 h-20 rounded-lg object-cover">
            <div>
              <h4 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">夏日旅行攻略：如何在一周内玩转三亚</h4>
              <p class="text-xs text-neutral-500 mt-1 flex items-center">
                <i class="fa fa-eye mr-1"></i> 2.3k 阅读
              </p>
            </div>
          </div>
          
          <div class="flex items-start space-x-3 group cursor-pointer">
            <img src="https://picsum.photos/id/1070/300/200" alt="日志封面" class="w-20 h-20 rounded-lg object-cover">
            <div>
              <h4 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">初学者摄影技巧：如何拍出好看的人像照片</h4>
              <p class="text-xs text-neutral-500 mt-1 flex items-center">
                <i class="fa fa-eye mr-1"></i> 1.8k 阅读
              </p>
            </div>
          </div>
          
          <div class="flex items-start space-x-3 group cursor-pointer">
            <img src="https://picsum.photos/id/1080/300/200" alt="日志封面" class="w-20 h-20 rounded-lg object-cover">
            <div>
              <h4 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">我的年度书单：这10本书改变了我的思维方式</h4>
              <p class="text-xs text-neutral-500 mt-1 flex items-center">
                <i class="fa fa-eye mr-1"></i> 1.5k 阅读
              </p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 推荐关注 -->
      <div class="bg-white rounded-xl shadow-card p-5 transition-shadow hover:shadow-hover">
        <div class="flex justify-between items-center mb-4">
          <h3 class="font-bold text-lg flex items-center">
            <i class="fa fa-user-plus text-primary mr-2"></i>推荐关注
          </h3>
          <a href="#" class="text-primary text-sm hover:underline">换一批</a>
        </div>
        
        <div class="space-y-4">
          <!-- 推荐用户 -->
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img src="https://picsum.photos/id/1062/200" alt="推荐用户头像" class="w-10 h-10 rounded-full object-cover">
              <div>
                <p class="text-sm font-medium">小小摄影师</p>
                <p class="text-xs text-neutral-500">摄影爱好者</p>
              </div>
            </div>
            <button class="text-xs bg-primary hover:bg-primary/90 text-white px-3 py-1 rounded-full transition-colors">
              关注
            </button>
          </div>
          
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img src="https://picsum.photos/id/1074/200" alt="推荐用户头像" class="w-10 h-10 rounded-full object-cover">
              <div>
                <p class="text-sm font-medium">美食家小明</p>
                <p class="text-xs text-neutral-500">美食博主</p>
              </div>
            </div>
            <button class="text-xs bg-primary hover:bg-primary/90 text-white px-3 py-1 rounded-full transition-colors">
              关注
            </button>
          </div>
          
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img src="https://picsum.photos/id/1083/200" alt="推荐用户头像" class="w-10 h-10 rounded-full object-cover">
              <div>
                <p class="text-sm font-medium">旅行者小雨</p>
                <p class="text-xs text-neutral-500">环球旅行</p>
              </div>
            </div>
            <button class="text-xs bg-primary hover:bg-primary/90 text-white px-3 py-1 rounded-full transition-colors">
              关注
            </button>
          </div>
        </div>
      </div>
    </aside>
  </main>
  
  <!-- 页脚 -->
  <footer class="bg-white border-t border-neutral-200 py-6 mt-10">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="text-neutral-500 text-sm mb-4 md:mb-0">
          © 2023 我的个人空间. 保留所有权利.
        </div>
        <div class="flex space-x-6">
          <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">关于我们</a>
          <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">使用条款</a>
          <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">隐私政策</a>
          <a href="#" class="text-neutral-500 hover:text-primary transition-colors text-sm">帮助中心</a>
        </div>
      </div>
    </div>
  </footer>
  
  <!-- 回到顶部按钮 -->
  <button id="backToTop" class="fixed bottom-6 right-6 bg-primary/80 hover:bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 opacity-0 invisible">
    <i class="fa fa-angle-up text-xl"></i>
  </button>
  
  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('py-2', 'shadow');
        navbar.classList.remove('py-3', 'shadow-sm');
      } else {
        navbar.classList.add('py-3', 'shadow-sm');
        navbar.classList.remove('py-2', 'shadow');
      }
    });
    
    // 回到顶部按钮
    const backToTopBtn = document.getElementById('backToTop');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 300) {
        backToTopBtn.classList.remove('opacity-0', 'invisible');
        backToTopBtn.classList.add('opacity-100', 'visible');
      } else {
        backToTopBtn.classList.add('opacity-0', 'invisible');
        backToTopBtn.classList.remove('opacity-100', 'visible');
      }
    });
    
    backToTopBtn.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
    
    // 图片查看器功能模拟
    document.querySelectorAll('img[alt="旅行照片"], img[alt="城市风光"]').forEach(img => {
      img.addEventListener('click', () => {
        alert('图片查看器功能 - 实际项目中会打开大图预览');
      });
    });
    
    // 视频播放功能模拟
    document.querySelector('.fa-play-circle-o').parentElement.addEventListener('click', () => {
      alert('视频播放器功能 - 实际项目中会打开视频播放界面');
    });
  </script>
</body>
</html>